<template>
  <div>
    <el-container>
      <el-header
        ><div style="margin-top: 15px">
          <el-input
            placeholder="订单号"
            v-model="input"
            style="width: 400px; cursor: pointer"
          >
            <template slot="append">
              <el-button @click="search">
                <i class="el-icon-search"></i>
                搜索
              </el-button>
            </template>
          </el-input>
        </div>
      </el-header>
      <el-main>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="订单管理" name="first">
            <orders-manage ref="ordermanage" />
          </el-tab-pane>
          <el-tab-pane label="已完成订单" name="third">
            <finishi-orders ref="finishmanage" />
          </el-tab-pane>
          <el-tab-pane label="售后管理" name="four"
            ><after-sales
          /></el-tab-pane> </el-tabs
      ></el-main>
    </el-container>
  </div>
</template>

<script>
import FinishiOrders from "@/components/shop/FinishiOrders.vue";
import OrdersManage from "@/components/shop/OrdersManage.vue";
import AfterSales from "@/components/shop/AfterSales.vue";
export default {
  components: { OrdersManage, FinishiOrders, AfterSales },
  data() {
    return {
      input: "",
      activeName: "first",
      index: "",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(event);
      this.index = tab.index;
    },
    search() {
      if (this.index == 0) {
        this.$refs.ordermanage.orderOid(this.input);
      } else if (this.index == 1) {
        this.$refs.finishmanage.finishOid(this.input);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
div {
  line-height: 16px;
}
</style>